<template>
  <div class="tw-applistbox">
    <el-carousel
      v-if="appList && appList.length > 0"
      :height="carouselHeight"
      :interval="carouselInterval"
      :indicator-position="cutIndicator ? 'outside' : ''"
      :autoplay="autoplay"
      trigger="click"
      arrow="never"
    >
      <el-carousel-item v-for="(app, index) in appList" :key="index">
        <a class="tw-applist-item" @click="appEnter(app)">
          <div class="tw-applist-item-iconbox">
            <img
              v-if="app.img"
              :src="
                app.img.startsWith('http')
                  ? app.img
                  : `${$twApp.gateway}/fs/media${app.img}`
              "
            />
            <img
              v-else-if="appImages[idx]"
              :src="`${$twApp.fileBaseUrl}${appImages[idx].localPath}`"
            />
            <img v-else src="@assets/app-default.png" />
          </div>

          <div class="tw-applist-item-body">
            <h4>{{ app.name }}</h4>
            <p style="-webkit-box-orient: vertical">{{ app.description }}</p>
            <div>
              <span>进入</span>
              <i></i>
            </div>
          </div>
        </a>
      </el-carousel-item>
    </el-carousel>

    <!-- 无数据显示 -->
    <tw-lib-nodata v-else />

    <!-- 弹窗 -->
    <el-dialog
      :visible.sync="dialogVisible"
      :class="`tw-libbutton x${_uid}`"
      class="tw-apps"
      :close-on-click-modal="false"
      :show-close="true"
      :before-close="handleClose"
      :append-to-body="true"
    >
      <div slot="title">
        <p class="xtitle-top">{{ dialogTitleText }}</p>
      </div>
      <div class="tw-apps-body">
        <p>您将跳转至第三方服务平台：</p>
        <p class="xpath-tips" style="-webkit-box-orient: vertical">
          {{ otherAppPath + '，' + otherAppName }}
        </p>
        <p>请您注意个人信息及财产安全，使用中如遇到问题请及时与我们联系。</p>
        <div class="xlink-info">
          <span class="xtag">信息：</span>
          <p v-html="innerText" class="xinner"></p>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose()">取 消</el-button>
        <el-button type="primary" @click="handleClose('toApp')"
          >继续访问</el-button
        >
      </div>
    </el-dialog>
    <!-- 弹窗 -->
  </div>
</template>

<script>
import props from './props'
import style from '../tw-lib-base/style'
import nodata from '../tw-lib-base/no-data/no-data'

export default {
  name: 'tw-lib-app-carousel-boxs',

  mixins: [style, nodata],

  props,

  data() {
    return {
      // applist: [],
      dialogVisible: false,
      otherAppName: '',
      otherAppPath: '',
      innerText: '',
      currentApp: {},
      curOtherAppList: [
        '北京数字学校',
        '问卷调查',
        '东城教育信息化统一服务平台',
        '东城区初中化学自主学习平台',
        '东城区初中地理选考复习平台',
        '东城区消息中心',
        '运维中心',
        '统一门户平台',
        '东城-个人空间',
        '数据主题门户',
        '数据可视化管理系统'
      ]
    }
  },

  computed: {
    appList() {
      const result = this.data
      return result
    },

    style() {
      return {
        carouselWidth: this.carouselWidth,
        cutIndicator: this.cutIndicator,
        indicatorColor: this.indicatorColor,
        dialogShow: this.dialogShow,
        appDialogImg: this.appDialogImg,
        dialogTitleColor: this.dialogTitleColor,
        dialogTopicColor: this.dialogTopicColor,
        dialogTopicColorHover: this.dialogTopicColorHover,
        textInnerColor: this.textInnerColor,
        textShowColor: this.textShowColor,
        rightBoxWidth: this.rightBoxWidth
      }
    }
  },

  methods: {
    setStyle() {
      // ::root 表示组件根元素选择器
      let style = `
        ::root.tw-applistbox {
          width: ${this.carouselWidth}
        }

        ::root .el-carousel__container {
          width: ${this.carouselWidth}
        }

        ::root.tw-applistbox .el-carousel__button {
          background-color: ${this.indicatorColor}
        }

        ::root.el-dialog__wrapper.tw-apps .el-dialog .xtitle-top {
          color: ${this.dialogTitleColor}
        }

        ::root.el-dialog__wrapper.tw-apps .el-dialog .xpath-tips {
          color: ${this.dialogTopicColor}
        }

        ::root.el-dialog__wrapper.tw-apps .el-dialog .xinner {
          color: ${this.textInnerColor}
        }

        ::root.el-dialog__wrapper.tw-apps .el-button:focus,
        ::root.el-dialog__wrapper.tw-apps .el-button {
          color: ${this.dialogTopicColor}
        }

        ::root.el-dialog__wrapper.tw-apps .el-button:focus,
        ::root.el-dialog__wrapper.tw-apps .el-button:hover {
          background-color: #fff;
          border-color: ${this.dialogTopicColor}
        }

        ::root.el-dialog__wrapper.tw-apps .el-button--primary:focus,
        ::root.el-dialog__wrapper.tw-apps .el-button--primary {
          color: #fff;
          background-color: ${this.dialogTopicColor};
          border: 1px solid ${this.dialogTopicColor}
        }

        ::root.el-dialog__wrapper.tw-apps .el-button--primary:focus:hover,
        ::root.el-dialog__wrapper.tw-apps .el-button--primary:hover {
          color: #fff;
          background-color: ${this.dialogTopicColorHover};
          border: 1px solid ${this.dialogTopicColorHover}
        }

        ::root.tw-applistbox .tw-applist-item:hover .tw-applist-item-body > div{
          color: ${this.textShowColor}
        }

        ::root.tw-applistbox .tw-applist-item:hover .tw-applist-item-body > div > i {
          border-right-color: ${this.textShowColor};
          border-bottom-color: ${this.textShowColor}
        }

        ::root.tw-applistbox .tw-applist-item-body {
          width: ${this.rightBoxWidth}
        }

      `
      if (this.appDialogImg.length > 0) {
        style += `
          ::root.el-dialog__wrapper.tw-apps .el-dialog .el-dialog__header {
            background: url('${this.$twApp.fileBaseUrl +
              this.appDialogImg[0].localPath}') no-repeat center;
            background-size:100% 100%
          }

          ::root.el-dialog__wrapper.tw-apps .el-icon-close:before {
            color: #fff;
          }
        `
      }

      this.addStyle(style)
    },

    appEnter(app) {
      const vm = this
      // 区分当前应用是否为第三方，只有第三方应用才会弹窗（目前以名称过滤掉）
      let isOtherApp = false
      const isExist = this.curOtherAppList.indexOf(app.name)
      if (isExist !== -1) {
        isOtherApp = true
      }

      if (vm.dialogShow && !isOtherApp) {
        vm.currentApp = app
        vm.otherAppPath = app.url
        vm.otherAppName = app.name
        vm.innerText = app.description
        vm.dialogVisible = true
      } else {
        if (app.url) {
          let relayHref = app.url
          if (relayHref.indexOf('?') === -1) {
            relayHref = relayHref + '?'
          }
          window.open(relayHref + `${this.$twApp.user.accreditUrl}`, '_blank')
        }
      }
    },

    handleClose(item) {
      const vm = this
      vm.dialogVisible = false
      if (item === 'toApp') {
        const href = `${vm.currentApp.url || '#'}${
          vm.currentApp.addAccreditCode
            ? (vm.currentApp.url && vm.currentApp.url.includes('?')
                ? '&'
                : '?') + vm.$twApp.user.accreditUrl
            : ''
        }`
        window.open(href, '_blank')
      }
      vm.otherAppName = ''
      vm.otherAppPath = ''
      vm.innerText = ''
      vm.currentApp = {}
    }
  },

  watch: {
    data: {
      deep: true,
      handler() {
        this.appList = this.data
      }
    },

    colors: {
      deep: true,
      handler() {
        this.setStyle()
      }
    }
  },

  created() {
    window.aa = this
    this.appList = this.data
  }
}
</script>

<style lang="scss">
@import './css/index.scss';
</style>
